<template>
	<view class="box">
		<!-- 标签栏 -->
		<view class="tab">
			<u-tabs :list="list1" @click="clicks" lineColor="#109C7A" :current="active" :activeStyle="{
						color: '#333',
						fontWeight: 'bold'
					}" :inactiveStyle="{
						color: '#999',
					}"></u-tabs>
		</view>

		<!-- 空列表 -->
		<view class="none" v-if="!list.length">
			<view class="none-img f-w">
				<image src="https://jw.xzsw2021.com/static/order/icon_199@2x.png" mode=""></image>
			</view>
			<view class="none-name f34 bold">暂时没有任何订单</view>
			<view class="none-desc f26 c666">赶快去下单吧</view>
			<view class="none-btn" @click="goHome">去首页逛逛</view>
		</view>
		<!-- 订单列表 -->
		<view class="content" v-else>
			<view class="card" v-for="(item,index) of list" :key="index">
				<!-- 名字状态 -->
				<view class="one fw-bt f28">
					<view class="title">{{item.merchant.marketField.mar_name}}</view>
					<view class="state red bold">{{getState(item.status,item.refund_type)}}</view>
				</view>
				<!-- 商品信息 -->
				<view class="four flex">
					<view class="img f-w">
						<image :src="item.refundProduct[0].product.cart_info.productAttr.image" mode=""></image>
					</view>
					<view class="four-r">
						<view class="f1 flex">
							<view class="f26 four-name hide-line2">{{item.refundProduct[0].product.cart_info.product.store_name}}</view>
							<view class="f1-2">
								<view class="f26">￥{{item.refundProduct[0].product.product_price}}</view>
								<view class="f22 c999">共{{item.refundProduct[0].product.product_num}}件</view>
							</view>
						</view>
						<view class="f2 f24 c999">下单时间：{{item.order.create_time}}</view>
						<view class="f3 f24">
							退款金额: ￥
							<text class="f36">{{item.refund_price}}</text>
						</view>
					</view>
				</view>
				<!-- 取消原因 -->
				<view class="two">
					<view class="f24">{{item.cancel_desc}}</view>
				</view>
				<!-- 操作按钮 -->
				<view class="five f-w" @click="goDetail(index,item.refund_order_id)">
					<view>订单详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0, //
				is_mask: false, //
				list1: [{
					name: '全部',
				}, {
					name: '处理中',
				}, {
					name: '已处理'
				}], //标签
				list: [{
						shop_name: '弹子石菜市场',
						state: 1, //1.待支付 2.待配送 3.配送中 4.已完成 5.已取消
						img: 'https://jw.xzsw2021.com/static/index/tu_18@2x.png',
						name: '【青嫩鲜脆】四季豆500g +±50g ',
						price: 15.99,
						total_num: 7,
						time1: '2022-02-15 11:27',
					},
					{
						shop_name: '弹子石菜市场',
						state: 2, //1.待支付 2.待配送 3.配送中 4.已完成 5.已取消
						img: 'https://jw.xzsw2021.com/static/index/tu_18@2x.png',
						name: '【青嫩鲜脆】四季豆500g +±50g让我会更加文件夹我跟我姐 ',
						price: 67.99,
						total_num: 3,
						time1: '2022-02-15 11:27',
					}
				], //订单列表
			}
		},
		onLoad(options) {

		},
		onShow() {
			this.page = 1
			this.list = []
			this.getlist(this.page)

		},
		methods: {
			// 切换nav
			clicks(item) {
				console.log(item)
				this.page = 1
				this.list = []
				this.active = item.index
				this.getlist(this.page)
			},
			// 去首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getlist(e) {
				let status=this.active
				
				let data = {
					status,
					page: e,
					limit: 10,
				}
				uni.showLoading({
					mask: true
				})
				this.$request('refund/list', data, 'GET').then(res => {
					if (res.status == 200) {
						let closetime = res.data.close_time
						this.closetime = res.data.close_time
						uni.hideLoading()
						
						if (e==1) {
							this.list = res.data.list
						} else {
							if (res.data.list.length == 0) {
								uni.showToast({
									title: "暂无更多",
									icon: "none"
								})
								return
							}
							let list = this.list
							list = [...list, ...res.data.list]
							this.list = list
							this.page = e
						}
					}


				})
			},
			// 订单状态
			//退款类型 1:退款 2:退款退货  3换货
			//状态 0:待审核 -1:审核未通过 1:待退货 2:待收货 3:已退款
			getState(status,type) {
				let statusInfo='待审核';
				let typeInfo='';
			
				typeInfo= type==1 ? '退款' : (type==2 ? '退款退货' : '换货');
				if(status == 1 || status == 2){
					statusInfo='处理中-'+typeInfo;
				}
				if(status == -1 ){
					statusInfo='已处理-'+typeInfo+'失败';
				}
				if(status == 3){
					statusInfo='已处理-'+typeInfo+'成功';
				}
				return statusInfo;
			},
			// 订单详情
			goDetail(index, id) {
				this.list[index].show_more = false;
				console.log('详情'+id);
				uni.navigateTo({
					url: '/pages/client/order/orderDetail-aftersale/orderDetail-aftersale?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 0 44rpx;
		position: relative;

		.red {
			color: #F83535;
		}

		.tab {
			padding: 0 10rpx 12rpx;
		}

		.none {
			text-align: center;

			.none-img {
				margin: 95rpx auto 20rpx;
				width: 306rpx;
				height: 352rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.none-desc {
				margin-top: 20rpx;
			}

			.none-btn {
				margin: 130rpx auto 0;
				width: 300rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 10rpx;
			}
		}

		.content {
			min-height: calc(100vh - 100rpx);
			padding: 0 30rpx 80rpx;
			background-color: #F5F5F5;
			overflow: hidden;
			box-sizing: border-box;

			.card {
				margin: 20rpx auto;
				padding: 20rpx 30rpx;
				width: 690rpx;
				// height: 380rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;

				.four {
					margin-top: 28rpx;

					.img {
						flex-shrink: 0;
						width: 140rpx;
						height: 140rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.four-r {
						margin-left: 20rpx;
						flex: 1;

						.f1 {
							justify-content: space-between;

							.four-name {
								width: 300rpx;
								height: 71rpx;
							}

							.f1-2 {
								flex: 1;
								text-align: right;

								.f22 {
									margin-top: 8rpx;
								}
							}
						}

						.f2 {
							margin: 15rpx 0 15rpx;
						}

						.f3 {
							text-align: right;
						}
					}
				}

				.four+.two {
					margin: 20rpx 0 11rpx;
				}

				.five {
					margin-top: 22rpx;
					justify-content: flex-end;

					&>view {
						flex-shrink: 0;
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 24rpx;
						color: #fff;
						text-align: center;
						background: linear-gradient(64deg, #2BCCA5, #22B591);
						box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
						border: 1rpx solid #CCCCCC;
						border-radius: 10rpx;
					}

					&:not(:nth-child(1))>view {
						margin-left: 20rpx;
					}
				}
			}
		}

		.mask {
			position: fixed;
			left: 0;
			top: 0;
			width: 750rpx;
			height: 100vh;
			background: rgba(255, 255, 255, 0);
			z-index: 14;
		}
	}
</style>
